@import "./common/mixin.styl"

html,body
  width 100%
  height 100%
  background rgb(252,252,252)
  overflow hidden
  .rank-wrapper
    padding-top computedNum(50)
    .head-wrapper
      position fixed
      top 0
      left 0
      width 100%
      height computedNum(50)
      background #ffffff
      z-index 9
      box-shadow 0 1px 10px rgba(0,0,0,0.08)
      font-size 0
      color #000000
      .back-home
        width computedNum(50)
        padding-left computedNum(15)
        background url("../img/back-icon.png") no-repeat left center
        background-size computedNum(8.5) computedNum(15)
        font-size computedNum(16)
        font-family SimHei
        color rgb(102,102,102)
        height computedNum(50)
        line-height computedNum(50)
        margin-left computedNum(20)
      .sex-btn
        width computedNum(70)
        height computedNum(50)
        line-height computedNum(50)
        font-size computedNum(15)
        &.active
          color #f86161
          .bottom-line
            bottom 0
            width computedNum(25)
            left computedNum(22)
            height computedNum(3)
            border-radius computedNum(2)
            background #f86161
    .rank-content-wrapper
      font-size 0
      .rank-cat-list
        vertical-align top
        width computedNum(94)
        font-size computedNum(14)
        color #000000
        background rgb(242,242,242)
        ul
          li
           position relative
           padding computedNum(18) computedNum(15)
           border-1px-bottom(rgb(236,235,235))
           &.active
            background #ffffff
            .left-line
              height 100%
              left 0
              top 0
              width computedNum(3)
              background #f86161
      .rank-detail-list
        padding computedNum(0) computedNum(10)
        margin-top computedNum(18)
        overflow-y auto
        .load-wrapper
          padding 5px 0
        .no-more
          text-align center
          font-size computedNum(11)
          padding computedNum(10) 0
        ul
          width computedNum(260)
          li
            margin-bottom computedNum(20)
            &:last-child
              margin-bottom 0
            &:nth-child(1),&:nth-child(2),&:nth-child(3)
              .book-wrapper
                .book-detail
                  .order-num
                    color #ed4343
            .book-wrapper
              width computedNum(260)
              font-size 0
              .book-cover
                width computedNum(56)
                height computedNum(71)
                vertical-align top
                box-shadow 0.5px 0.5px 6px 0.5px #ccc
              .book-detail
                margin-left computedNum(10)
                width computedNum(194)
                font-size computedNum(13)
                color #666666
                .order-num
                  right 0
                  top 0
                  font-family MicrosoftYaHei-Bold
                  font-size computedNum(18)
                  color #b6b6b6
                .book-name
                  font-size computedNum(15)
                  color #000000
                  margin-bottom computedNum(8)
                .book-desc
                  overflow hidden
                  text-overflow ellipsis
                  white-space nowrap
                  margin-bottom computedNum(15)
                .status-and-cat
                  font-size computedNum(11)
                  color #999999
                  .cat
                    padding computedNum(1) computedNum(3) computedNum(0) computedNum(4.5)
                    border-1px-all(#999999)
                    top computedNum(-2)
                    margin-right computedNum(2)
                    &:after
                      border-radius computedNum(8)
    .bottom-nav-wrapper
      border-1px-top(rgb(226,226,226))
      position fixed
      bottom 0
      left 0
      width 100%
      padding computedNum(6) computedNum(35)
      font-size 0
      background #ffffff
      z-index 9
      li
        width computedNum(50)
        font-size computedNum(11)
        color #666666
        margin-right computedNum(35)
        text-align center
        &:last-child
          margin-right 0
        div
          width computedNum(50)
          height computedNum(38)
        .shelf-icon-wrapper
          background url("../img/shelf-icon.png") no-repeat center center
          background-size computedNum(19.5) computedNum(22.5)
        .index-icon-wrapper
          background url("../img/index-icon.png") no-repeat center center
          background-size computedNum(23) computedNum(22)
        .rank-icon-wrapper
          background url("../img/cat-icon.png") no-repeat center center
          background-size computedNum(23) computedNum(23)
        .mine-icon-wrapper
          background url("../img/mine-icon.png") no-repeat center center
          background-size computedNum(22) computedNum(22)
    .special-wrapper
      font-size 0
      li
        width computedNum(167.5)
        padding computedNum(20) 0 computedNum(20) computedNum(20)
        .left-wrapper
          width computedNum(90)
          font-size computedNum(11)
          .special-name
            font-family SimHei
            color #fc6a0e
            font-size computedNum(15)
            margin-bottom computedNum(10)
          .special-desc
            color #999999
        .right-wrapper
          vertical-align top
          width computedNum(76)
          height computedNum(40)
        .tv
          background url("../img/tv-icon.png") no-repeat center center
          background-size contain
        .book
          background url("../img/book-icon.png") no-repeat center center
          background-size contain
        .bag
          background url("../img/bag-icon.png") no-repeat center center
          background-size contain
        .coin
          background url("../img/coin-icon.png") no-repeat center center
          background-size contain
    .back-top-wrapper
      position fixed
      right computedNum(10)
      bottom computedNum(80)
      width computedNum(35)
      height computedNum(35)
      background url("../img/back-top-icon.png") no-repeat center center
      background-size computedNum(35) computedNum(35)
      z-index 9
      opacity 0